<template>
    <div>
        <div v-if="propJson.isForEach" :tempInfo="spanContent">
            <span :style="execStyle" v-for="item in responseInfo" :key="item" :class="propJson.isClickCopy || propJson.isClickAction ? 'clickCopyClass' : ''"
                  @click="spanClick(item)">
                {{item}}
                <br v-if="propJson.isBlock" />
            </span>
        </div>
        <span v-if="!propJson.isForEach" :style="execStyle" :tempInfo="spanContent" :class="propJson.isClickCopy || propJson.isClickAction ? 'clickCopyClass' : ''"
                @click="spanClick(responseInfo)">
            {{responseInfo}}
        </span>
    </div>
</template>

<script>
import {doThirdServiceAction, doThirdServiceValue} from "@/request/lowcode/thirdService";
import { ElMessage } from 'element-plus'
import router from "@/router";

export default {
    name: "SpanComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            responseInfo: ""
        }
    },
    methods: {
        execThen(resValue) {
            if (!resValue && this.propJson.editFlag) {
                this.responseInfo = "暂无数据"
            } else {
                this.responseInfo = resValue
            }
        },
        execCatch(resValue) {

        },
        execActionThen(execParam) {

        },
        execActionCatch(execParam) {

        },
        async doResponse() {
            await doThirdServiceValue(this.propJson.actionInfo, this.commonParam, this.execThen, this.execCatch, null)
        },
        doClickCopy(item) {
            const textArea = document.createElement("textarea")
            textArea.value = item
            textArea.style.position = "fixed"
            textArea.style.left = '0'
            textArea.style.top = '0'
            document.body.appendChild(textArea)
            textArea.select()
            try {
                const result = document.execCommand("copy")
                if (result) {
                    ElMessage({
                        message: '复制成功',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '复制失败',
                        type: 'error',
                    })
                }
            } catch (error) {
                ElMessage({
                    message: '复制失败',
                    type: 'error',
                })
            }
            textArea.remove()
        },
        async doClickAction() {
            if (this.propJson.clickActionType === 'routeTo') {
                this.$router.push({path: this.propJson.clickActionInfo.routeToInfo.routeTo})
            } else if (this.propJson.clickActionType === 'action') {
                // 定义一个标志位，后续同步执行
                let awaitObj = {flag: false, res: true}
                await doThirdServiceAction(this.propJson.clickAction, awaitObj, this.commonParam, this.execActionThen, this.execActionCatch, {});
            }
        },
        spanClick(item) {
            // 优先触发拷贝事件
            if (this.propJson.isClickCopy) {
                this.doClickCopy(item);
            }
            if (this.propJson.isClickAction) {
                this.doClickAction();
            }
        }
    },
    computed: {
        execStyle() {
            let styleStr = "";
            if (this.propJson.spanStyleLineHeight) {
                styleStr += `line-height: ${this.propJson.spanStyleLineHeight};`
            }
            if (this.propJson.spanStyleFontSize) {
                styleStr += `font-size: ${this.propJson.spanStyleFontSize};`
            }
            if (this.propJson.spanStyleAlignCenter) {
                styleStr += `display: flex; align-items: center;`
            }
            if (this.propJson.spanStyleJustifyCenter) {
                styleStr += `display: flex; justify-content: center;`
            }
            if (this.propJson.spanStyleFontColor) {
                styleStr += `color: ${this.propJson.spanStyleFontColor};`;
            }
            if (this.propJson.spanStyleFontFamily) {
                styleStr += `font-family: ${this.propJson.spanStyleFontFamily};`
            }
            return styleStr;
        },
        spanContent() {
            // 计算返回的数据
            this.doResponse()
        }
    }
}
</script>

<style scoped lang="less">
.clickCopyClass {

}

.clickCopyClass:hover {
    cursor: pointer;
}
</style>